<template>
  <Layout title="房屋详情" :has-back="true" :has-tabbar="false" ref="layout">
    <view
      style="
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding: 20rpx;
        display: flex;
        flex-direction: column;
      "
    >
      <view style="margin-bottom: 20rpx" v-if="canEdit">
        <u-button type="error" @click="editOwner">
          <text style="font-size: 40rpx">编辑</text>
        </u-button>
      </view>
      <view style="flex: 1; min-height: 0">
        <Scroll>
          <view style="display: flex; flex-direction: column; row-gap: 20rpx">
            <view>姓名: {{ owner.name }}</view>
            <view>组团: {{ owner.groupName }}</view>
            <view>路址: {{ owner.address }}</view>
            <view>类型: {{ owner.homeType }}</view>
            <view style="display: flex">
              <view> 常住: </view>
              <view style="margin-left: 20rpx">
                <u-tag
                  size="mini"
                  :type="getLiveStatus(owner.liveStatus).type"
                  :text="getLiveStatus(owner.liveStatus).text"
                ></u-tag>
              </view>
            </view>
            <view style="display: flex">
              <view> 装修: </view>
              <view style="margin-left: 20rpx">
                <u-tag
                  size="mini"
                  :type="getDecorationStatus(owner.decorationStatus).type"
                  :text="getDecorationStatus(owner.decorationStatus).text"
                ></u-tag>
              </view>
            </view>
            <view>状态: {{ owner.homeStatus }}</view>
            <view>友好: {{ owner.ownerType }}</view>
            <view style="display: flex">
              <view> 欠费: </view>
              <view style="margin-left: 20rpx">
                <u-tag
                  size="mini"
                  :type="getOweStatus(owner.oweStatus).type"
                  :text="getOweStatus(owner.oweStatus).text"
                ></u-tag>
              </view>
            </view>
            <view>习惯: {{ owner.payStyle }}</view>
            <view>月份: {{ JSON.stringify(owner.payMonth) }}</view>
            <view style="display: flex">
              <view>部门问题: </view>
              <view
                style="
                  display: flex;
                  flex-direction: column;
                  row-gap: 10rpx;
                  margin-left: 20rpx;
                "
              >
                <view
                  v-for="(
                    departmentQuestion, index
                  ) of owner.departmentQuestion"
                  :key="index"
                  style="display: flex"
                >
                  <view>{{
                    `${index + 1}. ${departmentQuestion.join("/")}`
                  }}</view>
                </view>
              </view>
            </view>
            <view style="display: flex">
              <view>业主问题: </view>
              <view style="margin-left: 20rpx">{{ owner.ownerQuestion }}</view>
            </view>
          </view>
        </Scroll>
      </view>
    </view>
  </Layout>
</template>
<script>
import Layout from "@/pages/component/layout/index.vue";
import Scroll from "@/pages/component/scroll/index.vue";
import { getOwnerByPaginationAndUuid } from "@/api/owner";
export default {
  components: { Layout, Scroll },
  computed: {
    canEdit() {
      return this.$store.state.roleList.includes("编辑业主");
    },
  },
  onLoad(event) {
    let owner = JSON.parse(event.owner);
    this.getOwnerByPaginationAndUuid(owner);
  },
  onShow() {
    if (this.firstFlag) {
      this.getOwnerByPaginationAndUuid(this.owner);
    }
  },
  data() {
    return {
      firstFlag: false,
      owner: {},
    };
  },
  methods: {
    async getOwnerByPaginationAndUuid(owner) {
      let result = await getOwnerByPaginationAndUuid({
        ...owner,
        currentPage: 1,
        pageSize: 10,
      });
      let ownerTemp = result.data.list[0];
      ownerTemp.payMonth = JSON.parse(ownerTemp.payMonth);
      ownerTemp.departmentQuestion = JSON.parse(ownerTemp.departmentQuestion);
      this.owner = ownerTemp;
    },
    editOwner() {
      let ownerJson = JSON.stringify(this.owner);
      uni.navigateTo({
        url: `/sub/owner/home-info/list/detail/edit/index?owner=${ownerJson}`,
      });
      this.firstFlag = true;
    },
    getOweStatus(status) {
      if (status === "1") {
        return {
          type: "error",
          text: "是",
        };
      } else if (status === "2") {
        return {
          type: "success",
          text: "否",
        };
      }
    },
    getLiveStatus(status) {
      if (status === "1") {
        return {
          type: "error",
          text: "是",
        };
      } else if (status === "2") {
        return {
          type: "success",
          text: "否",
        };
      }
    },
    getDecorationStatus(status) {
      if (status === "1") {
        return {
          type: "error",
          text: "是",
        };
      } else if (status === "2") {
        return {
          type: "success",
          text: "否",
        };
      }
    },
  },
};
</script>
